<%@ page import="tech.aistar.entity.Message" %><%--
  Created by IntelliJ IDEA.
  User: a'su's
  Date: 2020/9/21
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>系统消息</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${path}/css/TenantCentre.css">
    <link rel="stylesheet" href="${path}/css/home.css">
</head>
<style>
    .gray-bg{
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: url(http://${path2}/img/centre.jpg)  no-repeat center 0px;
        background-size: cover;

        background-position: center 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;

    }
</style>
<body class="gray-bg">
<script src="${path}/plugins/jquery-3.4.1.js"></script>
<script src="${path}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

<%@include file="top.jsp"%>

<div class="col-md-9 zy3" style="overflow:auto">
    <div style="height:1000px;width: 850px">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>消息状态</th>
            <th>消息内容</th>
            <th>接收时间</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody id="tb">

        <c:forEach items="${message}" var="m" varStatus="vs">

        <tr>
            <td style="font-weight: bolder;color: red" name="state">${m.messageState}</td>
            <td><button type="button" class="btn btn-primary"
                        data-container="body" data-toggle="popover" data-placement="top"
                        data-content="${m.messageContent}" onclick="look(this,${m.id})">
                    点击查看
                </button>
                </td>
            <td><fmt:formatDate value="${m.responseTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
            <td><button type="button" onclick="del(this,'${m.id}')" class="glyphicon glyphicon-trash"></button>
            </td>
        </tr>
        </c:forEach>

        </tbody>
    </table>
    </div>
</div>

<%@include file="bottom.jsp"%>



<script>
    $(function () {
        $("[data-toggle='popover']").popover();
    });

    $(function () {
        let state = document.getElementsByName("state")
        for (let i = 0; i <state.length ; i++) {
            if (state[i].innerText=='已读'){
                state[i].style.color="#00FF00"
            }

        }

    })


    function look(obj,id) {
        let tr = obj.parentElement.parentElement;
        let statetd = $(tr).find("td").eq(0);
        let datas = {"id":id};
        $.post('/taofang/message/lookmessage', datas, function (data) {
            if (data.code == 200) {
                statetd[0].style.color="#00FF00"
                let stateText=statetd[0].innerText="已读"
                obj.onclick=null;
                let messageSize = document.getElementById("messageSize").innerText = parseInt(document.getElementById("messageSize").innerText)-1
                if(messageSize<=0){
                    let messageSize = document.getElementById("messageSize").innerText = 0;
                }
            }else{
                alert("查看失败")
            }
        })

    }


    function del(obj,id) {
        if(confirm("确定删除该消息")) {
            let tbody = document.getElementById("tb");
            let tr = obj.parentElement.parentElement;
            let statetd = $(tr).find("td").eq(0);
            $.ajax({
                type: 'post',
                url: '/taofang/message/deltenant',
                data: {'id': id},
                success: function (data) {
                    if (data.code == 200) {
                        //js能力 从tbody中删除当前删除的tr
                        let tr = obj.parentElement.parentElement;
                        tbody.removeChild(tr);
                        if (statetd[0].innerText=='未读'){
                            let messageSize = document.getElementById("messageSize").innerText = parseInt(document.getElementById("messageSize").innerText)-1
                            if(messageSize<=0){
                                let messageSize = document.getElementById("messageSize").innerText = 0;
                            }
                        }

                    } else {
                        alert("删除失败!");
                    }
                }
            })
        }else{

        }

    }

</script>

</body>
</html>
